<template>
  <t-skeleton :loading="loadingSkeleton" animation="gradient" :row-col="skeletonStyle">
    <!-- 500 -->
    <result v-if="isError" title="500 Internal Server Error" type="500" tip="抱歉，服务器出错啦" />
    <t-space v-else direction="vertical" style="width: 100%;">
      <!-- 阶段 -->
      <stage />
      <!-- 描述 -->
      <descriptions />
      <!-- 标签栏 -->
      <tab-bar />
      <!-- 记录列表 -->
      <record v-if="orderDetails.selectedTab === '记录列表' || orderDetails.selectedTab === '回访记录'" />
      <!-- 量房信息-订单 -->
      <measure-info v-if="orderDetails.selectedTab === '量房信息' && orderDetails.currentOrderStage" />
      <!-- 方案 -->
      <plan-info v-if="orderDetails.selectedTab === '方案'" />
      <!-- 一见 -->
      <facade-info v-if="orderDetails.selectedTab === '一见'" />
      <!-- 二见 -->
      <two-see v-if="orderDetails.selectedTab === '二见'" />
      <!-- 主材单 -->
      <main-materal v-if="orderDetails.selectedTab === '主材单'" />
      <!-- 最终图纸 -->
      <drawing-info v-if="orderDetails.selectedTab === '最终图纸'" />
      <!-- 复测信息-产品 -->
      <retest v-if="(orderDetails.selectedTab === '复测信息' && orderDetails.currentStage)||(orderDetails.selectedTab === '产品复测' && orderDetails.productStage&&orderDetails.isNotice)" />
      <!-- 产品报价-产品 -->
      <budget v-if="orderDetails.selectedTab === '产品报价' && (orderDetails.currentStage || (orderDetails.productStage&&orderDetails.isNotice))" />
      <!-- 量房信息-产品 -->
      <measure-product v-if="(orderDetails.selectedTab === '量房信息' && orderDetails.currentStage) || (orderDetails.selectedTab === '产品量房' && orderDetails.productStage&&orderDetails.isNotice)" />
      <!-- 施工节点 -->
      <engineering-node v-if="orderDetails.selectedTab === '施工节点'" :injectKey="'orderDetails'"/>
      <!-- 合同信息-产品 -->
      <contract-product v-if="(orderDetails.selectedTab === '合同信息' && orderDetails.currentStage) || (orderDetails.selectedTab === '产品合同' && orderDetails.productStage&&orderDetails.isNotice)" />
      <!-- 产品进度-产品 -->
      <product-speed v-if="orderDetails.selectedTab === '产品进度' && (orderDetails.currentStage || (orderDetails.productStage&&orderDetails.isNotice))" />
      <!-- 报价信息 / 预算复核 -->
      <!-- <budget-config
        v-if="orderDetails.selectedTab === '报价信息' || orderDetails.selectedTab === '预算复核'"
        :order-id="orderDetails.id"
        :company-id="orderDetails.companyId"
      /> -->
      <!-- 材料分析 -->
      <material-analysis v-if="orderDetails.selectedTab === '材料分析'" :order-id="orderDetails.id" />
      <!-- 人工费用分析 -->
      <labor-costs-analysis v-if="orderDetails.selectedTab === '人工费用分析'" :order-id="orderDetails.id" />
      <!-- 合同信息-订单 -->
      <contract-info v-if="orderDetails.selectedTab === '合同信息' && orderDetails.currentOrderStage" />

      <!-- 量房信息-单品 -->
      <measure-single  v-if="orderDetails.selectedTab === '量房信息' && orderDetails.currentSingleStage"/>
       <!-- 单品方案-单品 -->
       <retest-single v-if="orderDetails.selectedTab === '单品方案' && orderDetails.currentSingleStage" />
      <!-- 单品到店-单品 -->
      <budget-single v-if="orderDetails.selectedTab === '单品到店' && orderDetails.currentSingleStage" />
      <!-- 合同信息-单品 -->
      <contract-single v-if="orderDetails.selectedTab === '单品合同' && orderDetails.currentSingleStage" />
      <!-- 产品进度-单品 -->
      <product-speed-single v-if="orderDetails.selectedTab === '产品进度' && orderDetails.currentSingleStage" />
      <!-- 施工结算 -->
      <engineering-settlement v-if="orderDetails.selectedTab === '施工结算'" :injectKey="'orderDetails'" />
      <!-- 设计信息 -->
       <design-info v-if="orderDetails.selectedTab === '设计信息'" :injectKey="'orderDetails'" />
       <!-- 施工放样 -->
        <engineering-setting-out v-if="orderDetails.selectedTab === '施工放样'" :injectKey="'orderDetails'" />
       <!-- 验收单 -->
       <inspect v-if="orderDetails.selectedTab === '验收单'" :injectKey="'orderDetails'" />
    </t-space>
  </t-skeleton>
</template>

<script setup lang="ts">
import { MessagePlugin, SkeletonRowCol } from 'tdesign-vue-next';
import { onMounted, provide, ref } from 'vue';

import { basicOrderCRUD } from '@/api/order/basic';
import { productOrderCRUD, getProductOrderbyOrderid } from '@/api/order/product';
import { getSingleProductOrderbyOrderid, singleProductOrderCRUD } from '@/api/order/single'
import Result from '@/components/result/index.vue';
import BudgetConfig from '@/pages/budget/components/BudgetConfig.vue';
import LaborCostsAnalysis from '@/pages/budget/components/LaborCostsAnalysis.vue';
import MaterialAnalysis from '@/pages/budget/components/MaterialAnalysis.vue';
import ContractInfo from '@/pages/finance/contract/components/ContractInfo.vue';
import FacadeInfo from '@/pages/order/design/components/FacadeInfo.vue';
import MeasureInfo from '@/pages/order/design/components/MeasureInfo.vue';
import PlanInfo from '@/pages/order/design/components/PlanInfo.vue';
import MainMateral from '@/pages/order/design/components/MainMateral.vue';
import DrawingInfo from '@/pages/order/design/components/DrawingInfo.vue';
import { useTabsRouterStore } from '@/store';
import disposableParams from '@/utils/disposableParams';

import TwoSee from '../../design/components/TwoSee.vue';
import Descriptions from './Descriptions.vue';
import Record from './Record.vue';
import Stage from './Stage.vue';
import TabBar from './TabBar.vue';
import Retest from '../../product/components/Retest.vue';
import Budget from '../../product/components/Budget.vue';
import MeasureProduct from '../../product/components/MeasureProduct.vue';
import EngineeringNode from '@/pages/project/details/components/EngineeringNode.vue';
import ContractProduct from '../../product/components/ContractProduct.vue';
import ProductSpeed from '../../product/components/ProductSpeed.vue';

import MeasureSingle from '../../single/components/MeasureSingle.vue';
import RetestSingle from '../../single/components/RetestSingle.vue';
import BudgetSingle from '../../single/components/BudgetSingle.vue';
import ContractSingle from '../../single/components/ContractSingle.vue';
import ProductSpeedSingle from '../../single/components/ProductSpeedSingle.vue';
import EngineeringSettlement from '@/pages/project/details/components/EngineeringSettlement.vue';
import Inspect from '@/pages/project/details/components/Inspect.vue';
import DesignInfo from '@/pages/project/details/components/DesignInfo.vue';
import EngineeringSettingOut from '@/pages/project/details/components/EngineeringSettingOut.vue';
import { useRoute } from 'vue-router';
import maskPhone from '@/utils/maskPhone'

// 标签路由仓库
const tabsRouterStore = useTabsRouterStore();
// route
const route = useRoute();
// props
const props = defineProps({
  // 订单id
  id: {
    type: Number,
    required: true,
  },
});
// 加载骨架屏
const loadingSkeleton = ref(true);
// 骨架屏样式
const skeletonStyle: SkeletonRowCol = [
  { height: '100px' },
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [{ height: '30px' }, { height: '30px' }, { height: '30px' }],
  [
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
    { width: '100px', height: '30px' },
  ],
  {
    height: '300px',
  },
];
// 订单详情
const orderDetails = ref<Record<string, any>>({});
// 依赖注入
provide<Record<string, any>>('orderDetails', orderDetails);
// 修改标签路由标题
const editTabRouteTitle = () => {
  const tabRoute = tabsRouterStore.tabRouterList.find(
    (item) => item.name === 'OrderDetails' && (Number(item.params.id) === orderDetails.value.id||Number(item.params.id) === orderDetails.value.orderId),
  );

  
  if (tabRoute) {
    tabRoute.title = `${orderDetails.value.name || orderDetails.value.customerName} - ${maskPhone(orderDetails.value.phone) || orderDetails.value.wxCode}`;
    
  }
};
// 是否错误
const isError = ref(false);
// 处理获取订单详情
const handleGetOrderDetails = () => {
  loadingSkeleton.value = true;
  const params = {
    id: props.id,
  };
  const orderDetailsJumpParams = disposableParams.getAll(`order-details-jump-params-${props.id}`);
  console.log(orderDetailsJumpParams,'orderDetailsJumpParams');
  
  if (['16','17', '18'].includes(orderDetailsJumpParams.approveType)) {
    getProductOrderbyOrderid({orderId:props.id})
      .then((data) => {
        // 订单详情跳转参数
        // const orderDetailsJumpParams = disposableParams.get(`order-details-jump-params-${props.id}`);
        data.currentStage = data.stage; // 设置当前订单阶段
        data.operateType = orderDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = orderDetailsJumpParams.approveType; // 设置审批类型
        data.isNotice = orderDetailsJumpParams.isNotice; // 设置是否通知列表
        orderDetails.value = data;
        console.log(orderDetails.value,'wai');
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
      });
    
  } else if (['19','20','21','26','27','28'].includes(orderDetailsJumpParams.approveType)) {
    getSingleProductOrderbyOrderid({orderId:props.id})
      .then((data) => {
        // 订单详情跳转参数
        // const orderDetailsJumpParams = disposableParams.get(`order-details-jump-params-${props.id}`);
        data.currentSingleStage = data.stage; // 设置当前订单阶段
        data.operateType = orderDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = orderDetailsJumpParams.approveType; // 设置审批类型
        data.isNotice = orderDetailsJumpParams.isNotice; // 设置是否通知列表
        orderDetails.value = data;
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
      });
    
  }else if (route.query.isBasicSingle === 'true') {
    getSingleProductOrderbyOrderid({orderId:props.id})
      .then((data) => {
        // 订单详情跳转参数
        // const orderDetailsJumpParams = disposableParams.get(`order-details-jump-params-${props.id}`);
        data.currentSingleStage = data.stage; // 设置当前订单阶段
        data.operateType = orderDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = orderDetailsJumpParams.approveType; // 设置审批类型
        data.isNotice = orderDetailsJumpParams.isNotice; // 设置是否通知列表
        orderDetails.value = data;
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
      });
    
  }else if (route.query.isProduct === 'true') {
    productOrderCRUD
      .get(params)
      .then((data) => {
        // 订单详情跳转参数
        // const orderDetailsJumpParams = disposableParams.get(`order-details-jump-params-${props.id}`);
        data.currentStage = data.stage; // 设置当前订单阶段
        data.operateType = orderDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = orderDetailsJumpParams.approveType; // 设置审批类型
        data.isNotice = orderDetailsJumpParams.isNotice; // 设置是否通知列表
        orderDetails.value = data;
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
      });
    
  } else if (route.query.isSingleProduct === 'true') {
    singleProductOrderCRUD
      .get(params)
      .then((data) => {
        // 订单详情跳转参数
        // const orderDetailsJumpParams = disposableParams.get(`order-details-jump-params-${props.id}`);
        data.currentSingleStage = data.stage; // 设置当前订单阶段
        data.operateType = orderDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = orderDetailsJumpParams.approveType; // 设置审批类型
        data.isNotice = orderDetailsJumpParams.isNotice; // 设置是否通知列表
        orderDetails.value = data;
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
      });
    
  } else {
    basicOrderCRUD
      .get(params)
      .then((data) => {
        // 订单详情跳转参数

        data.currentOrderStage = data.orderStage; // 设置当前订单阶段
        data.operateType = orderDetailsJumpParams.operateType; // 设置操作类型     
        data.approveType = orderDetailsJumpParams.approveType; // 设置审批类型
        data.isNotice = orderDetailsJumpParams.isNotice; // 设置是否通知列表
        data.designOrderId = orderDetailsJumpParams.designOrderId; // 设置设计id
        orderDetails.value = data;
        editTabRouteTitle();
      })
      .catch(({ message }) => {
        MessagePlugin.error(message);
        isError.value = true;
      })
      .finally(() => {
        loadingSkeleton.value = false;
      });
  }

};
onMounted(() => {
  handleGetOrderDetails();
});
</script>
